fix: pressing enter doesn't set max #1168
Conversation
ESLint Summary View Full Report
Report generated by eslint-plus-action |
| const handleClick = (e: SyntheticEvent) => { | ||
| e.preventDefault() | ||
| onClick() | ||
| onMouseDown() |
There was a problem hiding this comment.
Will this still work on mobile devices?
There was a problem hiding this comment.
I've reverted to using onClick.
|
The examples in the MUI Documentation don't seem to react to an enter press even though there is an onClick handler attached to it: https://mui.com/material-ui/react-text-field/#input-adornments It might have to do with the missing |
There was a problem hiding this comment.
I agree with the previous reviewers:
I think on enter browsers will usually submit the first "submit" button they find in a form.
The standard value of the <button/> type attribute is submit changing it to button should already do the trick.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type
Deploying with
|
| Latest commit: |
092f3b0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5e91b11a.web-core.pages.dev |
| Branch Preview URL: | https://max-amount.web-core.pages.dev |
|
After reverting to |
There was a problem hiding this comment.
Nice!
I tested it again and it works nicely:
Enter submits the form and leads to the next step if the form data is valid.
The next step does not submit on enter (which is correct as there is no text input).
This matches the HTML spec:
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
|
Note to the QA: let's start testing forms using keyboard shortcuts and not just with a mouse. Tab + Tab + Tab + Enter |
What it solves
Resolves #1164
How this PR fixes it
The
InputValueHelperrequired thetype="button"attribute to prevent it from submitting the parent form andshouldValidateto betrueinonMaxAmountClick. I also wrappedInputValueHelperin the correctInputAdornmentcomponent.How to test it
Attempt to send tokens and, after selecting one and entering an amount, press the enter key whilst the field is in focus. Observe no change in value or form submission. Doing so in an empty field should also result in the same.
Clicking "Max" should set the max value, as well as validate the amount, e.g. when no token amount exists, it should show an error regarding a value of
0.